<script setup lang="ts">
import { inject, computed } from 'vue'
import type { CollapseItemProps } from './type'
import { CollapseContextKey } from './type'
import Icon from '../Icon/Icon.vue'
const props = defineProps<CollapseItemProps>()
const CollapseContext = inject(CollapseContextKey)
const handleClick = () => {
  if (props.disabled) {
    return
  }
  CollapseContext?.handleItemClick(props.name)
}
const isActive = computed(() => {
  return CollapseContext?.activeNames.value.includes(props.name)
})
const TransitionEvents: Record<string, (el: HTMLElement) => void> = {
  beforeEnter(el) {
    el.style.height = '0px'
    el.style.overflow = 'hidden'
  },
  enter(el) {
    el.style.height = `${el.scrollHeight}px`
  },
  beforeLeave(el) {
    el.style.height = `${el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },
  leave(el) {
    el.style.height = '0px'
  }
}
</script>

<template>
  <div
    class="vk-collapse-item"
    :class="{
      'is-disabled': disabled
    }">
    <div
      :id="`item-header-${name}`"
      class="vk-collapse-item__header"
      :class="{
        'is-disabled': disabled,
        'is-active': isActive
      }"
      @click="handleClick">
      <slot name="title">{{ title }}</slot>
      <Icon icon="angle-right" class="header-angle" />
    </div>
    <transition name="slide" v-on="TransitionEvents">
      <div class="vk-collapse-item__wrapper" v-show="isActive">
        <div class="vk-collapse-item__content">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped></style>
